<template>
    <div class="main">
        <van-notice-bar
            text="编辑的时候需要重新上传, 审核才能够公开"
            speed="0"
        />
        <van-tabs :active="activeTab">
            <van-tab title="公开" class="vanTab">
                <!-- 添加展示的列表功能 --><pagination
                    v-model="PublicPageIndex"
                    :page-count="total.Public"
                    @change="PublicTo"
                ></pagination>
                <van-cell-group inset class="cell-group">
                    <van-cell
                        :title="card.title"
                        :label="card.description"
                        v-for="(card, index) in Public"
                        :key="card._id"
                        @click="editIt(card)"
                    >
                    </van-cell>
                </van-cell-group>
            </van-tab>
            <van-tab title="未经审核" class="vanTab">
                <pagination
                    v-model="UnPublicPageIndex"
                    :page-count="total.UnPublic"
                    @change="UnPublicTo"
                ></pagination>
                <van-cell-group inset class="cell-group">
                    <van-cell
                        :title="card.title"
                        :label="card.description"
                        v-for="(card, index) in UnPublic"
                        :key="card._id"
                        @click="editIt(card)"
                    >
                        <div slot="right-icon" class="btn">编辑</div>
                    </van-cell>
                </van-cell-group>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import $store from "@/store/index.js";
import card from "@/pages/index/card.vue";
import vanCellGroup from "@/wxcomponents/weapp/dist/cell-group/index";
import vanNoticeBar from "@/wxcomponents/weapp/dist/notice-bar/index";
import vanTab from "@/wxcomponents/weapp/dist/tab/index";
import vanTabs from "@/wxcomponents/weapp/dist/tabs/index";
import vanCell from "@/wxcomponents/weapp/dist/cell/index";
import vanOverlay from "@/wxcomponents/weapp/dist/overlay/index";
export default {
    components: {
        vanTab,
        vanTabs,
        vanNoticeBar,
        vanCellGroup,
        vanCell,
        vanOverlay,
        card,
    },
    computed: {
        ...mapState({
            Public: (state) => state.user.myXin.Public,
            UnPublic: (state) => state.user.myXin.UnPublic,
        }),
        ...mapGetters(["total"]),
    },
    onLoad() {
        this.Public.$to(0);
        this.UnPublic.$to(0);
    },
    onShow() {
        this.Public.$refresh();
        this.UnPublic.$refresh();
    },
    data() {
        return { PublicPageIndex: 1, UnPublicPageIndex: 1, activeTab: 0 };
    },
    methods: {
        PublicTo(index) {
            this.Public.$to(index - 1);
        },
        UnPublicTo(index) {
            this.UnPublic.$to(index - 1);
        },
        editIt(card) {
            $store.commit("changeEditingXin", card);
            wx.navigateTo({ url: "../editor/index" });
        },
    },
};
</script>

<style lang="less" scoped>
.cell-group {
    box-shadow: 0 0 black;
}
.main {
    height: 100%;
    background-color: #f9fafb;
}
.vanTab {
    display: flex;
    flex-direction: column;
}
</style>
